<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="robots" content="NONE,NOARCHIVE" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= htmlWebpackPlugin.options.title || 'Sentry Dev'%></title>
    <script>
      function __sentryMark(name) {
        if (!window.performance || typeof window.performance.mark !== 'function') { return; }
        window.performance.mark(name);
      }
      __sentryMark('head-start');
    </script>
    <link rel="preload" href="/api/client-config/" as="fetch" crossorigin />
    <script>
      // Django inlines a class for the user theme, but SPA mode requires manual init.
      // Default to `.theme-system` and replace with user theme as soon as possible.
      const BOOTSTRAP_URL = '/api/client-config/';
      async function applySpaTheme() {
        const res = await fetch(BOOTSTRAP_URL);
        if (res.ok) {
          const data = await res.json();
          const theme = data.user?.options?.theme;
          if (theme) {
            document.body.classList.replace('theme-system', `theme-${theme}`);
            return;
          }
        }
        document.body.classList.remove('theme-system');
      }
      applySpaTheme();
    </script>
  </head>
  <body class="theme-system">
    <% if (htmlWebpackPlugin.options.unsupportedBrowser) { %>
    <style>.unsupported-browser { display: none; }</style>
    <div class="unsupported-browser">
      Sorry, your browser is not supported.  Please upgrade to
      the latest version or switch your browser to use this site.
      See <a href="http://outdatedbrowser.com/">outdatedbrowser.com</a>
      for options.
    </div>
    <% } %>

    <div id="blk_router">
      <div class="splash-loader">
        <div class="loading-mask"></div>
        <div class="loading-indicator" data-test-id="loading-indicator">
            <svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
              <style>
                  :root {
                      --delay: 0ms;
                      --duration: 900ms;
                      --stagger: 50ms;
                  }
                  path {
                      stroke-dashoffset: 1150;
                      stroke-dasharray: 1150;
                      animation: draw calc(var(--duration) + (var(--i) * var(--stagger)) + (1.3s - var(--delay))) calc(var(--delay) + ((3 - var(--i)) * var(--stagger))) ease-out;
                  }
                  [data-index="0"] {
                      stroke: #F0369A;
                  }
                  [data-index="1"] {
                      stroke: #67C800;
                  }
                  [data-index="2"] {
                      stroke: #7553FF;
                  }
                  @keyframes draw {
                      0% {
                          stroke-dashoffset: 1150;
                      }
                      40% {
                          stroke-dashoffset: 0;
                      }
                      100% {
                          stroke-dashoffset: -1150;
                      }
                  }
                  @media (prefers-reduced-motion: reduce) {
                    path {
                      animation: none;
                      stroke-dashoffset: 0;
                    }
                  }
              </style>
              <script>
                  const host = document.currentScript.closest('svg');
                  host.addEventListener('animationend', (event) => {
                      event.target.style.animationName = 'none';
                      setTimeout(() => {
                          event.target.style.animationName = '';
                      }, 0);
                  })
              </script>
              <defs>
                  <filter id="goo">
                      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 34 -6" result="goo" />
                      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
                  </filter>
              </defs>
              <mask id="loader-mask" width="300" height="265" x="50" y="72" maskUnits="userSpaceOnUse" style="mask-type:alpha">
                  <path fill="#000" d="M223.687 85.56a28.02 28.02 0 0 0-24-13.559 28.02 28.02 0 0 0-24 13.559l-39.48 67.62a193.26 193.26 0 0 1 106.5 159.96h-27.72a166.07 166.07 0 0 0-92.76-136.32L85.687 240a95.52 95.52 0 0 1 55.38 73.02h-63.66a4.55 4.55 0 0 1-3.659-2.325 4.56 4.56 0 0 1-.06-4.335l17.64-30a64.4 64.4 0 0 0-20.16-11.4l-17.46 30a27.24 27.24 0 0 0 2.023 30.435 27.2 27.2 0 0 0 8.116 7.005 27.96 27.96 0 0 0 13.56 3.6h87.18a116.41 116.41 0 0 0-48-103.86l13.86-24a143.22 143.22 0 0 1 61.8 127.86h73.86a215.28 215.28 0 0 0-98.46-190.8l28.02-48a4.62 4.62 0 0 1 6.3-1.62c3.18 1.74 121.74 208.62 123.96 211.02a4.562 4.562 0 0 1-4.08 6.78h-28.56q.54 11.46 0 22.86h28.68a27.54 27.54 0 0 0 27.72-27.66 26.94 26.94 0 0 0-3.72-13.68z"/>
              </mask>
              <g id="root" mask="url(#loader-mask)">
                  <path stroke="#F0369A" stroke-width="4" d="M92.5 268.7 88 276.6 71.4 305v.1a8 8 0 000 7.2l.2.4a8 8 0 006 3.4h67.3l-.6-3.4A99 99 0 0097.2 242.5l-6.8-4 33.4-57.8 6.9 4a163 163 0 0181.6 128.8l.2 2.7h33.7L246 313A196 196 0 00147.8 155.7l-7-4L178.6 87v-.1a25 25 0 0133-9.1l.8.3a25 25 0 019 8.9h.1v.2L343.7 296.4a24 24 0 013.3 12v.4a24.5 24.5 0 01-24.6 24.4H291.5"/>
                  <g filter="url('#goo')" data-index="0" style="--delay:0s;" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                      <path style="--i: 1;" d="m82.8 253.5-12.7 22-12.5 21.2-.2.3v.1l-.2.2v.3a24 24 0 00.3 22.4l.3.6A24 24 0 0076.4 332h87l-3.2-21.8A115 115 0 00112 233l17.6-30.4a147 147 0 0166.8 112l1.3 17.5h65.6l-1.3-20.2a212 212 0 00-99.3-165.8l29.6-50.8a9 9 0 013.3-3.1 9 9 0 0112.1 3.1l122.2 209.2h.1a8 8 0 011 4v.2a8.5 8.5 0 01-8.6 8.5h-38.9"/>
                      <path style="--i: 0;" d="M92.5 268.7 88 276.6 71.4 305v.1a8 8 0 000 7.2l.2.4a8 8 0 006 3.4h67.3l-.6-3.4A99 99 0 0097.2 242.5l-6.8-4 33.4-57.8 6.9 4a163 163 0 0181.6 128.8l.2 2.7h33.7L246 313A196 196 0 00147.8 155.7l-7-4L178.6 87v-.1a25 25 0 0133-9.1l.8.3a25 25 0 019 8.9h.1v.2L343.7 296.4a24 24 0 013.3 12v.4a24.5 24.5 0 01-24.6 24.4H291.5"/>
                      <path style="--i: 2;" d="M85.7 264.5l-8.7 15-12.5 21.3-.1.2-.1.3A15.6 15.6 0 0076.9 324h77.2l-1.8-12.6a107 107 0 00-51-75.8l25.5-44.1A155 155 0 01204.3 314l.8 10.1h49.7l-.8-11.7A204 204 0 00151.8 148.9l33.6-57.7a17 17 0 0129.2 0L336.8 300.4a16 16 0 012.2 8.2 16.5 16.5 0 01-16.6 16.6H291.5"/>
                  </g>
                  <g filter="url('#goo')" data-index="1" style="--delay:180ms;" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                      <path style="--i: 2;" d="m82.8 253.5-12.7 22-12.5 21.2-.2.3v.1l-.2.2v.3a24 24 0 00.3 22.4l.3.6A24 24 0 0076.4 332h87l-3.2-21.8A115 115 0 00112 233l17.6-30.4a147 147 0 0166.8 112l1.3 17.5h65.6l-1.3-20.2a212 212 0 00-99.3-165.8l29.6-50.8a9 9 0 013.3-3.1 9 9 0 0112.1 3.1l122.2 209.2h.1a8 8 0 011 4v.2a8.5 8.5 0 01-8.6 8.5h-38.9"/>
                      <path style="--i: 0;" d="M92.5 268.7 88 276.6 71.4 305v.1a8 8 0 000 7.2l.2.4a8 8 0 006 3.4h67.3l-.6-3.4A99 99 0 0097.2 242.5l-6.8-4 33.4-57.8 6.9 4a163 163 0 0181.6 128.8l.2 2.7h33.7L246 313A196 196 0 00147.8 155.7l-7-4L178.6 87v-.1a25 25 0 0133-9.1l.8.3a25 25 0 019 8.9h.1v.2L343.7 296.4a24 24 0 013.3 12v.4a24.5 24.5 0 01-24.6 24.4H291.5"/>
                      <path style="--i: 1;" d="M85.7 264.5l-8.7 15-12.5 21.3-.1.2-.1.3A15.6 15.6 0 0076.9 324h77.2l-1.8-12.6a107 107 0 00-51-75.8l25.5-44.1A155 155 0 01204.3 314l.8 10.1h49.7l-.8-11.7A204 204 0 00151.8 148.9l33.6-57.7a17 17 0 0129.2 0L336.8 300.4a16 16 0 012.2 8.2 16.5 16.5 0 01-16.6 16.6H291.5"/>
                  </g>
                  <g filter="url('#goo')" data-index="2" style="--delay:800ms;" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                      <path style="--i: 0;" d="m82.8 253.5-12.7 22-12.5 21.2-.2.3v.1l-.2.2v.3a24 24 0 00.3 22.4l.3.6A24 24 0 0076.4 332h87l-3.2-21.8A115 115 0 00112 233l17.6-30.4a147 147 0 0166.8 112l1.3 17.5h65.6l-1.3-20.2a212 212 0 00-99.3-165.8l29.6-50.8a9 9 0 013.3-3.1 9 9 0 0112.1 3.1l122.2 209.2h.1a8 8 0 011 4v.2a8.5 8.5 0 01-8.6 8.5h-38.9"/>
                      <path style="--i: 3;" d="M92.5 268.7 88 276.6 71.4 305v.1a8 8 0 000 7.2l.2.4a8 8 0 006 3.4h67.3l-.6-3.4A99 99 0 0097.2 242.5l-6.8-4 33.4-57.8 6.9 4a163 163 0 0181.6 128.8l.2 2.7h33.7L246 313A196 196 0 00147.8 155.7l-7-4L178.6 87v-.1a25 25 0 0133-9.1l.8.3a25 25 0 019 8.9h.1v.2L343.7 296.4a24 24 0 013.3 12v.4a24.5 24.5 0 01-24.6 24.4H291.5"/>
                      <path style="--i: 1;" d="M85.7 264.5l-8.7 15-12.5 21.3-.1.2-.1.3A15.6 15.6 0 0076.9 324h77.2l-1.8-12.6a107 107 0 00-51-75.8l25.5-44.1A155 155 0 01204.3 314l.8 10.1h49.7l-.8-11.7A204 204 0 00151.8 148.9l33.6-57.7a17 17 0 0129.2 0L336.8 300.4a16 16 0 012.2 8.2 16.5 16.5 0 01-16.6 16.6H291.5"/>
                  </g>
              </g>
          </svg>
        </div>

        <div class="loading-message">
          <p>Loading a <scraps-bleep>$#!%</scraps-bleep>-ton of JavaScript&hellip;</p>
          <p><small>You may need to disable adblocking extensions to load Sentry.</small></p>
          <script>
            function randomFrom(arr) {
              return arr[Math.floor(Math.random() * arr.length)];
            }
            function randomBetween(min, max) {
              return Math.floor(Math.random() * (max - min - 1) + min);
            }
            customElements.define('scraps-bleep', class extends HTMLElement {
              constructor() {
                super();
                this.shapes = '◆●▴▪×'.split('');
                this.chars = '@#$%&*!+'.split('');
                this.length = this.textContent.trim().length;
              }
              random() {
                const set = new Set();
                let hasShape = false;
                while (set.size < this.length) {
                  if (!hasShape && Math.random() > 0.75) {
                    set.add(randomFrom(this.shapes));
                    hasShape = true;
                  } else {
                    set.add(randomFrom(this.chars));
                  }
                }
                return Array.from(set.values()).join('');
              }
              shuffle() {
                this.raf = requestAnimationFrame(() => {
                  this.textContent = this.random();
                  this.timeout = setTimeout(() => this.shuffle(), randomBetween(50, 250));
                })
              }
              connectedCallback() {
                if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                  this.shuffle();
                }
              }
              disconnectedCallback() {
                cancelAnimationFrame(this.raf);
                clearTimeout(this.timeout);
              }
            })
          </script>
        </div>
      </div>
    </div>

    <% if (htmlWebpackPlugin.options.window) { %>
    <script>
      <% for (var varName in htmlWebpackPlugin.options.window) { %>
          window['<%=varName%>'] = <%= JSON.stringify(htmlWebpackPlugin.options.window[varName]) %>;
        <% } %>
    </script>
    <% } %>
  </body>
</html>
